<template>
  <div class="gsap-box">
    <div class="test" ref="testRef" id="testRef"></div>
  </div>
</template>
<script setup lang="ts">
import gsap from 'gsap';
import { Power4, Linear } from 'gsap';
const testRef = ref<HTMLElement>()
const obj = ref<any>({
  num: 5,
})
onMounted(() => {
  nextTick(() => {
    const testEl = document.getElementById('testRef')
    gsap.to(obj.value, 
    5,
    {
      num: 0,
      ease: Linear.easeIn,
      onUpdate:() => {
        testEl.innerHTML = Math.ceil(obj.value.num)
        console.log('======obj', obj.value.num)
      },
      onComplete:() => {
        console.log('========end')
        obj.value.num = 5
      }
    })
  })
})
</script>
<style lang="scss" scoped>
.gsap-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .test {
    font-size: 50px;
  }
}
</style>